<script setup lang="ts">
import { computed, reactive, watch } from 'vue';
import { $t } from '@/locales';
import { enableStatusRecord, genderRecord } from '@/constants/business';

defineOptions({
  name: 'UserDetailModal'
});

interface Props {
  /** the detail of row data */
  rowData?: Api.SystemManage.User | null;
}

const props = defineProps<Props>();

const visible = defineModel<boolean>('visible', {
  default: false
});

const title = computed(() => $t('page.manage.user.userDetail'));

type Model = Pick<
  Api.SystemManage.User,
  | 'id'
  | 'userName'
  | 'nickName'
  | 'gender'
  | 'telephone'
  | 'email'
  | 'status'
  | 'userRoles'
  | 'createTime'
  | 'updateTime'
  | 'deptName'
>;

const model: Model = reactive(createDefaultModel());

function createDefaultModel(): Model {
  return {
    id: 0,
    userName: '',
    nickName: '',
    gender: null,
    telephone: '',
    email: '',
    userRoles: [],
    status: 1,
    createTime: '',
    updateTime: '',
    deptName: ''
  };
}

// 格式化显示值
const displayValues = computed(() => ({
  gender: model.gender ? $t(genderRecord[model.gender]) : '-',
  status: model.status ? $t(enableStatusRecord[model.status]) : '-',
  userRoles: model.userRoles.length > 0 ? model.userRoles.join(', ') : '-',
  createTime: model.createTime || '-',
  updateTime: model.updateTime || '-',
  deptName: model.deptName || '-'
}));

function handleInitModel() {
  // 属性拷贝
  if (props.rowData) {
    Object.assign(model, props.rowData);
  }
}

watch(visible, () => {
  if (visible.value) {
    handleInitModel();
  }
});
</script>

<template>
  <NModal v-model:show="visible" preset="dialog" :title="title" style="width: 800px; max-width: 90vw; height: 60vh">
    <NForm label-placement="left" :label-width="120" :show-feedback="false" class="user-detail-form" disabled>
      <NGrid :cols="2" :x-gap="16" :y-gap="24">
        <NFormItemGi :label="$t('page.manage.user.userName')">
          <NInput :value="model.userName || '-'" readonly />
        </NFormItemGi>

        <NFormItemGi :label="$t('page.manage.user.nickName')">
          <NInput :value="model.nickName || '-'" readonly />
        </NFormItemGi>

        <NFormItemGi :label="$t('page.manage.user.gender')">
          <NInput :value="displayValues.gender" readonly />
        </NFormItemGi>

        <NFormItemGi :label="$t('page.manage.user.telephone')">
          <NInput :value="model.telephone || '-'" readonly />
        </NFormItemGi>

        <NFormItemGi :label="$t('page.manage.user.email')">
          <NInput :value="model.email || '-'" readonly />
        </NFormItemGi>

        <NFormItemGi :label="$t('page.manage.user.status')">
          <NInput :value="displayValues.status" readonly />
        </NFormItemGi>

        <NFormItemGi :label="$t('page.manage.organization.belongDept')">
          <NInput :value="displayValues.deptName" readonly />
        </NFormItemGi>

        <NFormItemGi :label="$t('common.createTime')">
          <NInput :value="displayValues.createTime" readonly />
        </NFormItemGi>

        <NFormItemGi :label="$t('common.updateTime')">
          <NInput :value="displayValues.updateTime" readonly />
        </NFormItemGi>

        <NFormItemGi :span="2" :label="$t('page.manage.user.userRole')">
          <NInput :value="displayValues.userRoles" readonly />
        </NFormItemGi>
      </NGrid>
    </NForm>
  </NModal>
</template>

<style scoped>
.user-detail-form {
  padding: 16px 0;
}

.user-detail-form :deep(.n-form-item) {
  margin-bottom: 0;
}

.user-detail-form :deep(.n-form-item-label) {
  padding-bottom: 8px;
  line-height: 1.5;
  font-weight: 500;
}

.user-detail-form :deep(.n-form-item-blank) {
  min-height: 32px;
}

.user-detail-form :deep(.n-input) {
  background-color: var(--n-color-target);
  cursor: default;
  border: 1px solid var(--n-border-color);
}

.user-detail-form :deep(.n-input .n-input__input) {
  cursor: default;
  color: var(--n-text-color);
}

.user-detail-form :deep(.n-input:hover) {
  border-color: var(--n-border-color);
}

.user-detail-form :deep(.n-grid) {
  row-gap: 24px;
}

.user-detail-form :deep(.n-grid-item) {
  margin-bottom: 0;
}
</style>
